<template>
  <div class="top">
    <van-nav-bar title="购物车" left-arrow @click-left="onClickLeft" />
  </div>
  <div class="cart">
    <div class="cart-container">
      <van-empty v-show="goodsList.length == 0" description="购物车目前没有商品" :image="carttupian">
        <router-link :to="{ name: 'category' }">
          <van-button round type="danger" class="bottom-button">
            去购物
          </van-button>
        </router-link>
      </van-empty>
      <div class="list" v-for="item in goodsList" :key="item.id">
        <van-swipe-cell>
          <div class="checkbox">
            <van-checkbox :name="item" v-model="item.cart.checked" checked-color="#flla27"
              @change="onCheck"></van-checkbox>
          </div>
          <div class="image">
            <router-link :to="{ name: 'detailed', params: { id: item.id } }">
              <van-image width="50" height="50" :src="item.picture"></van-image>
            </router-link>
          </div>
          <div class="spxx">
            <div>{{ item.name }}</div>
            <div class="bottom">
              <div class="price"><span>￥</span>{{ item.price }}</div>
              <van-stepper v-model="item.cart.num" theme="round" button-size="22" disable-input></van-stepper>
            </div>
          </div>
          <template #right>
            <van-button class="delete-button" aquare icon="delete" type="danger" @click="onDelete(item)"></van-button>
          </template>
        </van-swipe-cell>
      </div>
    </div>
    <van-submit-bar v-show="goodsList.length" :price="je * 100" button-text="去结算" button-type="primary"
      @submit="onSubmit" class="settlement">
      <van-checkbox v-model="allChecked" checked-color="#flla27" @click="onCheckAll">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>
<script setup>
import { ref, onMounted, computed } from "vue";
import { getcart } from "../api";
import useCart from "../store/cart";
import carttupian from "../img/cart_empty.png";
import { useRouter } from "vue-router";
import { showToast } from "vant";

const { cart, removeCart } = useCart();
const goodsList = ref([]);
const allChecked = ref(false);
const router = useRouter();
const onClickLeft = () => {
  router.back();
};

onMounted(async () => {
  await loadCart();
  onCheck();
});

const loadCart = async () => {
  const ids = cart.map((item) => item.id);
  goodsList.value = await getcart({ ids: ids.join(",") });
  goodsList.value.forEach((goods) => {
    goods.cart = cart.find((item) => goods.id == item.id);
  });
};

const onDelete = (item) => {
  const id = item.id;
  goodsList.value.forEach((item, index) => {
    if (item.id == id) {
      goodsList.value.splice(index, 1);
    }
  });
  removeCart(id);
};

const je = computed(() => {
  let sum = 0;
  goodsList.value.forEach((item) => {
    if (item.cart.checked) {
      sum += item.price * item.cart.num;
    }
  });
  return sum;
});

const onCheckAll = () => {
  goodsList.value.forEach((el) => {
    el.cart.checked = allChecked.value;
  });
};

const onCheck = () => {
  allChecked.value = goodsList.value.every((el) => el.cart.checked);
};

const onSubmit = () => {
  const checkedGoods = goodsList.value.filter((item) => item.cart.checked);
  if (checkedGoods.length === 0) {
    showToast("请选择商品进行结算");
    return;
  }
  showToast("结算成功");
  checkedGoods.forEach((item) => {
    removeCart(item.id);
  });
  goodsList.value = goodsList.value.filter((item) => !item.cart.checked);
  allChecked.value = false;
};
</script>
<style scoped>
.top {
  --van-nav-bar-background: #ee7a06;
  --van-nav-bar-icon-color: #fff;
  --van-nav-bar-title-text-color: #fff;
  height: 100%;
  overflow-y: scroll;
}

.top .van-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.cart {
  margin: 0.3rem;
  padding: 30px 0 3rem 0;
}

.cart-container {
  margin-top: 1rem;
}

.list {
  position: relative;
  height: 5rem;
  border-radius: 10px;
  box-shadow: 0px 0px 5px #ccc;
  margin-bottom: 1rem;
}

.checkbox {
  position: absolute;
  top: 30px;
  left: 8px;
}

.image {
  position: absolute;
  top: 15px;
  left: 35px;
}

.spxx {
  height: 5rem;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  padding: 0 1rem 0 6rem;
}

.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  color: #c82519;
  font-size: 15px;
}

.delete-button {
  width: 2rem;
  height: 100%;
}

.bottom-button {
  width: 7rem;
  height: 2rem;
}

.settlement {
  margin-bottom: -7px;
}

:deep(.van-submit-bar) {
  bottom: 3.5rem;
}

:deep(.van-swipe-cell) {
  width: 100%;
}
</style>

